const path = require("path");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');
module.exports = {
  mode: 'none',
  entry: './src/main.js',
  devtool:'cheap-module-eval-source-map',// 开发使用
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),// 必须使用绝对路径
  },
  optimization:{
    sideEffects: true,
    usedExports: true, //只将使用了的成员进行打包
    concatenateModules:true, //将所有的模块合并到一起放在同一个函数中，即提升了运行效率，又减小了代码的体积
    minimize: true, //将打包文件进行压缩
  },
  devServer:{ // 开发中，使用这种形式进行静态资源文件输出
    hotOnly: true,// 开启热模块更新
    contentBase:['public'], //配合webpack-dev-server同时使用
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env',{
                modules: false //强制让Tree Shaking生效
              }]
            ]
          }
        }
      },
      {
        test: /.css$/,
        use: ['style-loader','css-loader']
      },
      {
        test: /.less$/,
        use: ['style-loader','css-loader', 'less-loader']
      },
      {
        test: /.html$/,
        // use: 'html-loader' //默认只能为img标签的src属性打包
        use: {
          loader: 'html-loader',
          options: {
            attrs: ['img:src', 'a:href'] //在这里为所有的html资源引用进行模块化处理
          }
        }
      },
      {
        test: /.vue$/,
        use: 'vue-loader'
      },
      {
        test: /.png$|.jpg$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024 //10kb
          }
        }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template: './src/template/index.html',
    }),
    //模块热替换插件
    new webpack.HotModuleReplacementPlugin(),
    new VueLoaderPlugin()
  ]
};